<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>编辑菜单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__CSS__/oksub.css">
    <script type="text/javascript" src="__LIB__/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
    <!--form表单-->
    <form class="layui-form ok-form ibms-dialog-form" lay-filter="filter">
        <div class="layui-form-item">
            <div class="layui-col-xs6">
                <label class="layui-form-label">父级菜单</label>
                <div class="layui-input-block">
                    <select name="pid" id="parentmenu" lay-verify="required">
                        <option value="" selected>请选择父级菜单</option>
                    </select>
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">菜单类型</label>
                <div class="layui-input-block">
                    <select name="type" lay-verify="required">
                        <option value="" selected>请选择菜单类型</option>
                        <option value="0">导航菜单</option>
                        <option value="1">权限节点</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-xs6">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">权限标识</label>
                <div class="layui-input-block">
                    <input type="text" name="flags" lay-verify="" placeholder="请输入权限标识" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单地址</label>
            <div class="layui-input-block">
                <input type="text" name="url" lay-verify="required" placeholder="请输入菜单URL" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-xs6">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-block">
                    <input type="text" name="icon" lay-verify="required" placeholder="请输入菜单图标" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">图标类型</label>
                <div class="layui-input-block">
                    <input type="text" name="fontfamily" lay-verify="required" placeholder="请输入图标类型" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" value="1" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" lay-verify="required" placeholder="请输入排序" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                <a class="layui-btn layui-btn-primary cancle-btn">取消</a>
            </div>
        </div>
    </form>
</div>
<!--js逻辑-->
<script src="__LIB__/layui/layui.js"></script>
<script>
    layui.use(["element", "form", "jquery", "okLayer", "okUtils"], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        okLoading.close();

        // 表单赋值：parent.rowData为父页面传过来的行数据
        let initData = JSON.parse(JSON.stringify(parent.rowData));
        form.val("filter", initData);

        okUtils.ajax("{:url('getValidMenu')}", "get").done(function (response) {
            $('#parentmenu').append(new Option("--- 顶级菜单 ---", 0, false, 0 === initData.pid));
            $.each(response.data, function(index, item) {
                $('#parentmenu').append(new Option(item.indent + item.name, item.id, false, item.id === initData.pid));
            });
            form.render('select');
        }).fail(function (error) {
            // console.log(error)
        });

        form.on("submit(edit)", function (data) {
            data.field.id = initData.id;
            okUtils.ajax("{:url('edit')}", "post", data.field, true).done(function (response) {
                okLayer.greenTickMsg(response.msg, function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            }).fail(function (error) {
                // console.log(error)
            });
            return false;
        });

        $(".cancle-btn").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
    });
</script>
</body>
</html>
